import { useState, useEffect } from "react";
import { increment, decrement } from "./store/actions";
import store from "./store";

const App = () => {
    const [counts, setCounts] = useState(store.getState().count);
    useEffect(() => {
        store.subscribe(() => {
            setCounts(store.getState().count);
        });
    }, []);
    return (
        <>
            <div className='page-header'>
                <h1>
                    Redux <small>基本使用</small>
                </h1>
            </div>
            <div className='page-content'>
                <div className='wrapper wrapper1'>
                    <div className='alert alert-danger'>
                        当前counts的值为：{counts}
                    </div>
                    <div className='btn-group'>
                        <div
                            className='btn btn-default'
                            onClick={() => store.dispatch(increment(4))}
                        >
                            增加
                        </div>
                        <div
                            className='btn btn-danger'
                            onClick={() => store.dispatch(decrement(2))}
                        >
                            减少
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default App;
